<template>
  <div class="PrivateMsg">
    <div
      v-for="(item, index) in data"
      :key="index"
      @click="textclick(item.id, item.type, item.name)"
    >
      <div class="textflex">
        <div class="img">
          <img :src="item.url" />
        </div>
        <div class="texts">
          <h2>{{ item.name }}</h2>
          <span>{{ item.msg }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script >
import { defineComponent } from "vue";

export default defineComponent({
  components: {},
  props: {
    data: {
      type: Object,
      default: () => {},
    },
    textclick: {
      type: Function,
      default: () => {},
    },
  },
  setup() {
    return {};
  },
});
</script>

<style scoped lang="less" >
.PrivateMsg {
  height: 250px;
  overflow: auto;
  .textflex {
    padding: 15px 15px 15px 15px;
    display: flex;
    height: 74px;
    cursor: pointer;
    .img {
      line-height: 74px;
      > img {
        width: 40px;
        height: 40px;
      }
    }
    .texts {
      margin-left: 20px;
      > h2 {
        margin: 0;
      }
      > span {
        pointer-events: none;
        word-break: break-word;
        line-height: 1.6;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1; /*设置显示的行数*/
        line-clamp: 1; /*设置显示的行数*/
        -webkit-box-orient: vertical;
      }
    }
  }
  .textflex:hover {
    background-color: #f6f6f6;
  }
}
</style>
